<template>
  <div>
    <div class="custom-table">
      <div class="cell-content" style="border-left:0px">
        <div class="data-text">当前在训儿童{{ formInline.user }}</div>
        <div
          class="chart"
          id="current-children-chart"
          style="height: 70px;flex :2;" 
        ></div>
      </div>
      <!-- div2 -->
      <div class="cell-content">
        <div class="data-text">病种分布</div>
        <div
          class="chart"
          id="disease-distribution-chart"
          style="height: 70px;flex :2;"
        ></div>
      </div>
      <!-- div3 -->
      <div class="cell-content" style="border-right:0px"></div>
      <!-- div4 -->
      <div class="cell-content" style="border-left:0px">
        <el-form-item label="Approved by">
          <el-input
            placeholder="Approved by"
            clearable
            v-model="field1"
            
          />
        </el-form-item>
      </div>
      <!-- div5 -->
      <div class="cell-content">
        <el-form-item label="入训日期">
          <el-date-picker
                  v-model="value"
                  type="date"
                  placeholder="Pick a day"
                  format="YYYY/MM/DD"
                  value-format="YYYY-MM-DD"
                  class="custom-date-picker"
                >
                  <template #default="cell">
                    <div class="cell" :class="{ current: cell.isCurrent }">
                      <span class="text">{{ cell.text }}</span>
                      <span v-if="isHoliday(cell)" class="holiday"></span>
                    </div>
                  </template>
                </el-date-picker>
                <el-button
                  :icon="Search"
                  circle
                  class="custom-button"
                ></el-button>
        </el-form-item>
      </div>
      <!-- div6 -->
      <div class="cell-content" style="border-right:0px">
        <el-button type="text" class="custom-button" >搜索</el-button>
      </div>
    </div>

    
    <!--  -->
    <div class="info-container">
      <div style="display: flex; flex: 1">
        <div class="info-item">全部 100人</div>
        <div class="info-item">在训 60人</div>
        <div class="info-item">毕业 40人</div>
      </div>
      <div class="button-group">
        <el-button type="primary">删除</el-button>
        <el-button type="primary">导出表格</el-button>
        <el-button type="primary">新增学员</el-button>
      </div>
    </div>
    <!-- 表单 -->
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          label="入训日期"
          property="date"
          width="120"
          align="center"
        >
          <template #default="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column
          property="name"
          label="姓名"
          width="120"
          align="center"
        />
        <el-table-column label="性别" property="sex" align="center" />

        <el-table-column label="档案详情" align="center">
          <template #default="scope">
            <el-button @click="goArchives(scope.row)" type="text"
              >查看档案</el-button
            >
          </template>
        </el-table-column>

        <el-table-column label="更多" align="center">
          <template #default="scope">
            <el-button @click="openDialog(scope.row)" type="text"
              >操作</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 操作对话框 -->
      <div>
        <el-dialog v-model="dialogFormVisible" title="Title" width="500">
          <el-form :model="form">
            <el-form-item label="指导老师" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off" disabled />
            </el-form-item>
            <el-form-item label="评估" :label-width="formLabelWidth">
              <el-select
                v-model="form.project"
                placeholder="Please select a zone"
              >
                <el-option label="Zone No.1" value="shanghai" />
                <el-option label="Zone No.2" value="beijing" />
              </el-select>
            </el-form-item>
            <el-form-item label="評論内容" :label-width="formLabelWidth">
              <el-input
                v-model="form.textarea"
                style="width: 350px"
                :rows="2"
                type="textarea"
                placeholder="Please input"
              />
            </el-form-item>
            <el-button style="width: 100%" type="text">退訓</el-button>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialogFormVisible = false">Cancel</el-button>
              <el-button type="primary" @click="dialogFormVisible = false">
                Confirm
              </el-button>
            </div>
          </template>
        </el-dialog>
      </div>
    </div>
    <!-- 分页 -->
    <div>
      <el-pagination
        @current-change="handlePageChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="100"
        layout="total, prev, pager, next, jumper"
        style="margin-top: 20px"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import * as echarts from "echarts";
import { useRouter } from "vue-router";
// 操作对话框
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";

const form = ref({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
  project: "",
  textarea: "",
  teachername: "王五",
});

const openDialog = (row) => {
  dialogFormVisible.value = true;
  form.value = row;
};

// 跳转到我是档案
const router = useRouter();

const goArchives = (row) => {
  router.push({ path: "/archivesMgmt" });
};

const field1 = ref("");
const tableData = ref([
  {
    id: "1",
    date: "2016-05-04",
    name: "Aleyna Kutzner",
    address: "Lohrbergstr. 86c, Süd Lilli, Saarland",
    sex: "男",
    phone: "1555344874",
    know: "微信",
    status: "未入训",
    type: "学生",
    report:
      "https://haowallpaper.com/link/common/file/previewFileImg/15662351096189248",
    project: "AABB工程项目",
  },
  {
    date: "2016-05-03",
    name: "Helen Jacobi",
    address: "760 A Street, South Frankfield, Illinois",
    sex: "男",
    phone: "1555344874",
    know: "微信",
    status: "以入训",
    type: "学生",
    report:
      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
    project: "CCBB工程项目",
  },
  {
    date: "2016-05-03",
    name: "Helen Jacobi",
    address: "760 A Street, South Frankfield, Illinois",
    sex: "男",
    phone: "1555344874",
    know: "微信",
    status: "以入训",
    type: "学生",
    report:
      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
    project: "DDBB工程项目",
  },
]);

onMounted(() => {
  // 饼图
  // 初始化图表
  const myChart = echarts.init(
    document.getElementById("current-children-chart")
  );
  const myChart2 = echarts.init(
    document.getElementById("disease-distribution-chart")
  );

  // 男女
  const option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "center",
      left: "70%",
    },
    series: [
      {
        name: "性别分布",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: "男" },
          { value: 735, name: "女" },
        ],
      },
    ],
  };
  // 病种
  const option2 = {
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        name: "病种分布",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 35, name: "自闭" },
          { value: 10, name: "听障" },
          { value: 15, name: "迟缓" },
        ],
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  myChart2.setOption(option2);
});

// 时间
const value = ref("2021-10-29");
const holidays = [
  "2021-10-01",
  "2021-10-02",
  "2021-10-03",
  "2021-10-04",
  "2021-10-05",
  "2021-10-06",
  "2021-10-07",
];
const isHoliday = ({ dayjs }) => {
  return holidays.includes(dayjs.format("YYYY-MM-DD"));
};

const formInline = ref({
  user: 60,
  region: "",
  date: "",
});
const onSubmit = () => {
  console.log("submit!");
};

// 分页
const currentPage = ref(1);
const pageSize = ref(5);
const handlePageChange = (page) => {
  currentPage.value = page;
};
const handleSearch = () => {
  currentPage.value = 1;
};
</script>

<style scoped>
.custom-table {
  /* border: 1px solid red; */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-collapse: collapse;
  flex-wrap: wrap; /* 允许换行 */

}

.cell-content {
  height: 100px;
  width: 32%;
  white-space: nowrap; /* 不换行 */
  display: flex;
  
  align-items: center;
  border: 1px solid black;


}


.info-container {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  padding: 10px;
  padding-left: 0;
  background-color: #f9f9f9;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.info-item {
  flex: 1;
  text-align: center;
  font-size: 16px;
  color: #333;
}

.button-group {
  flex: 2;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.button-group .el-button {
  min-width: 100px; /* 设置按钮的最小宽度 */
}
</style>